<template>
    <div class="page setting-page">
        <el-form ref="settingForm" label-width="140px" class="setting-form" size="small" label-position="left" :model="form" :rules="form.layoutType==1 ? rules :rules1">
            <div class="setting-title">支架/组件排布</div>
            <div class="setting-form" style="width:100%">
                <div style="margin-top:25px">
                    <el-form-item label="" label-width="0px">
                        <el-radio-group v-model="form.layoutType" @change="changeType">
                            <el-radio :label="1" :key="1" :value="1">组件置于支架上</el-radio>
                            <el-radio :label="2" :key="2" :value="2">直接布置组件（一般用于屋顶）</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <div class="form-title" v-show="form.layoutType==1">支架上的组件布置</div>
                <div class="form-div" v-show="form.layoutType==1">
                    <div style="position: relative">
                        <el-form-item label="组件在支架上放置方式" label-width="180px">
                            <el-radio-group v-model="form.bracketLayout.bracketLayoutType">
                                <el-radio :label="1">竖直放置</el-radio>
                                <el-radio :label="2">水平放置</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-row :gutter="20" style="width:560px">
                            <el-col :span="12">
                                <el-form-item label="" label-width="0px" prop="bracketLayout.bracketUpMargin">
                                    <span style="display: inline-block;width:137px;color:#606266;position: relative;padding-left:10px"><span style="color:#F56C6C;position: absolute;left:0px">*</span>支架组件上边距(<span style="color:#ff4400">a1</span>)</span>
                                    <el-input-number controls-position="right" style="width:100px" v-model="form.bracketLayout.bracketUpMargin"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="" label-width="0px" prop="bracketLayout.bracketDownMargin">
                                    <span style="display: inline-block;width:90px;color:#606266;position: relative;padding-left:10px"><span style="color:#F56C6C;position: absolute;left:0px">*</span>下边距(<span style="color:#ff4400">a2</span>)</span>
                                    <el-input-number controls-position="right" style="width:100px" v-model="form.bracketLayout.bracketDownMargin"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" style="width:560px">
                            <el-col :span="12">
                                <el-form-item label="" label-width="0px" prop="bracketLayout.bracketLeftMargin">
                                    <span style="display: inline-block;width:137px;color:#606266;position: relative;padding-left:10px"><span style="color:#F56C6C;position: absolute;left:0px">*</span>支架组件左边距(<span style="color:#25b059">b1</span>)</span>
                                    <el-input-number controls-position="right" style="width:100px" v-model="form.bracketLayout.bracketLeftMargin"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="" label-width="0px" prop="bracketLayout.bracketRightMargin">
                                    <span style="display: inline-block;width:90px;color:#606266;position: relative;padding-left:10px"><span style="color:#F56C6C;position: absolute;left:0px">*</span>右边距(<span style="color:#25b059">b2</span>)</span>
                                    <el-input-number controls-position="right" style="width:100px" v-model="form.bracketLayout.bracketRightMargin"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="组件横向布置数量" label-width="140px" prop="bracketLayout.componentTranNum">
                            <el-select  placeholder="请选择" style="width:180px" v-model="form.bracketLayout.componentTranNum">
                                <el-option v-for="item in componentTranNumList" :key="item.value" :label="item.value" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" label-width="0px" prop="bracketLayout.componentMargin">
                            <span style="display: inline-block;width:136px;color:#606266;position: relative;padding-left:10px"><span style="color:#F56C6C;position: absolute;left:0px">*</span>组件左右间距(<span style="color:#5677fc">c</span>)</span>
                            <el-input-number controls-position="right" style="width:100px" v-model="form.bracketLayout.componentMargin"></el-input-number>
                        </el-form-item>
                        <el-form-item label-width="0px">
                            <el-checkbox v-model="form.bracketLayout.isStack">堆栈放置</el-checkbox>
                        </el-form-item>
                        <div v-if="form.bracketLayout.isStack">
                            <el-form-item label-width="140px" label="堆栈数量" prop="bracketLayout.stackNum">
                                <el-select  placeholder="请选择" style="width:180px" v-model="form.bracketLayout.stackNum">
                                    <el-option v-for="item in componentStackNumList" :key="item.value" :value="item.value" :label="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label-width="0px" label="" prop="bracketLayout.stackMargin">
                                <span style="display: inline-block;width:136px;color:#606266;position: relative;padding-left:10px"><span style="color:#F56C6C;position: absolute;left:0px">*</span>堆栈间距(<span style="color:#ab00ff">d</span>)</span>
                                <el-input-number controls-position="right" style="width:100px" v-model="form.bracketLayout.stackMargin"></el-input-number>
                            </el-form-item>
                        </div>

                        <div style="font-size:12px;color:#606266">标准支架长宽
                            <span v-if="form.bracketLayout.bracketLayoutType == 1">
                                {{bWidth}}cm * {{bLength}}cm
                            </span>
                            <span v-if="form.bracketLayout.bracketLayoutType == 2">
                                {{bWidth2}}cm * {{bLength2}}cm
                            </span>

                        </div>
<!--                        <div style="border-top:1px dashed #a7a7a7;padding-top:10px;margin-top:15px;margin-bottom:10px;font-size:12px;position: relative;padding-left:20px;width:344px;color:#a7a7a7">-->
<!--                            <i class="el-icon-warning" style="position: absolute;color:#e51c23cc;left:0;font-size:16px;top:17px"></i>-->
<!--                            布置空间不足以放置标准支架时，可启用补充支架进行布置。<br/>-->
<!--                            补充支架除横向布置数量外，其他参数与主支架相同。-->
<!--                        </div>-->
<!--                        <el-form-item label-width="0px">-->
<!--                            <el-checkbox v-model="form.bracketLayout.isSupplement">启用补充支架</el-checkbox>-->
<!--                        </el-form-item>-->
<!--                        <div v-if="form.bracketLayout.isSupplement">-->
<!--                            <el-form-item label-width="200px" label="补充支架组件横向布置数量" prop="bracketLayout.supplementTranNum">-->
<!--                                <el-select  placeholder="请选择" style="width:150px" v-model="form.bracketLayout.supplementTranNum">-->
<!--                                    <el-option v-for="item in componentTranNumList" :key="item.value" :label="item.value" :value="item.value"></el-option>-->
<!--                                </el-select>-->
<!--                            </el-form-item>-->
<!--                            <div style="font-size:12px;color:#606266">补充支架长宽-->
<!--                                <span v-if="form.bracketLayout.bracketLayoutType == 1">-->
<!--                                    {{bWidth}}cm * {{bLength}}cm-->
<!--                                </span>-->
<!--                                <span v-if="form.bracketLayout.bracketLayoutType == 2">-->
<!--                                    {{bWidth2}}cm * {{bLength2}}cm-->
<!--                                </span>-->
<!--                            </div>-->
<!--                        </div>-->
                        <div style="position: absolute;right:0;top:0">
                            <img src="../static/img/bat1.png" v-if="form.bracketLayout.bracketLayoutType==1 && !form.bracketLayout.isStack"/>
                            <img src="../static/img/bat1-1.png" v-if="form.bracketLayout.bracketLayoutType==1 && form.bracketLayout.isStack"/>
                            <img src="../static/img/bat2.png" v-if="form.bracketLayout.bracketLayoutType==2 && !form.bracketLayout.isStack"/>
                            <img src="../static/img/bat2-1.png" v-if="form.bracketLayout.bracketLayoutType==2 && form.bracketLayout.isStack"/>
                        </div>
                    </div>
                </div>
                <div class="form-title">{{form.layoutType==1 ? '支架' : '组件'}}倾角及方位角</div>
                <div class="form-div">
                    <el-form-item label="支架类型" prop="bracketType" label-width="80px">
                        <el-select  placeholder="请选择" style="width:180px" v-model="form.bracketType" @change="changeTYpe">
                            <el-option value="1" label="固定支架" :key="1"></el-option>
                            <el-option value="2" label="夏季最优支架" :key="2"></el-option>
                            <el-option value="3" label="冬季最优支架" :key="3"></el-option>
<!--                            <el-option value="4" label="南北轴平单轴追踪" :key="4"></el-option>-->
<!--                            <el-option value="5" label="东西轴平单轴追踪" :key="5"></el-option>-->
<!--                            <el-option value="6" label="斜单轴追踪" :key="6"></el-option>-->
<!--                            <el-option value="7" label="双轴追踪" :key="7"></el-option>-->
                        </el-select>
                        <el-select  placeholder="请选择" style="width:200px" v-if="form.bracketType==2" v-model="form.summerType" @change="jijianFn">
                            <el-option :value="1" label="根据经纬度确定夏季月份" :key="1"></el-option>
                            <el-option :value="2" label="自定义夏季月份" :key="2"></el-option>
                        </el-select>
                        <el-select  placeholder="请选择" style="width:200px" v-if="form.bracketType==3" v-model="form.winterType"  @change="jijianFn">
                            <el-option :value="1" label="根据经纬度确定冬季月份" :key="1"></el-option>
                            <el-option :value="2" label="自定义冬季月份" :key="2"></el-option>
                        </el-select>
                        <div style="display: inline-block;padding-left:10px" v-if="form.bracketType == 2 || form.bracketType == 3 ">
                            <span style="font-weight:bold" v-show="form.bracketType == 2 && form.summerType == 2">夏季：
                                <span style="color:#aaa;font-weight: normal" v-if="summer!=''">{{summer}}月</span>
                            </span>
                            <span style="font-weight:bold;padding-left:10px" v-show="form.bracketType == 3  && form.winterType == 2">冬季：
                                <span style="color:#aaa;font-weight: normal" v-if="winter!=''">{{winter}}月</span>
                            </span>
                            <el-link type="info" @click="showJiJie" style="margin-left:10px" v-show="form.bracketType == 2 && form.summerType == 2">设置夏季</el-link>
                            <el-link type="info" @click="showJiJie" style="margin-left:10px" v-show="form.bracketType == 3 && form.winterType == 2">设置冬季</el-link>
                        </div>
                    </el-form-item>
                    <div>
                        <!--固定支架-->
                        <div  v-if="form.bracketType==1">
                            <el-row>
                                <el-col :span="9">
                                    <el-form-item label="倾角" prop="dipAngleFixed" label-width="80px">
                                        <el-input-number controls-position="right" :min="0" :max="90" style="width:100px;" v-model="form.dipAngleFixed" @change="changeAngle('edit')" :disabled="isJianyi"></el-input-number>
                                        <span style="padding-left:10px">度</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="15">
                                    <el-form-item label="方位角" prop="azimuthFixed" label-width="80px">
                                        <el-input-number controls-position="right" :min="-90" :max="90" style="width:100px;" v-model="form.azimuthFixed" @change="changeAngle2('edit')" :disabled="isJianyi"></el-input-number>
                                        <span  style="padding-left:10px">度</span>
                                        <span style="padding-left:20px"><el-checkbox v-model="isJianyi" @change="changeJianyi">使用建议倾角/方位角</el-checkbox></span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>

                        <!--季节最优支架-->
                        <div v-if="form.bracketType==2 || form.bracketType==3">
                            <el-row>
                                <el-col :span="9">
                                    <el-form-item label="倾角" prop="dipAngleJijie" label-width="80px">
                                        <el-input-number controls-position="right"  style="width:110px;"  v-model="form.dipAngleJijie" :disabled="isJianyi1" @change="changeAngle('edit')" ></el-input-number>
                                        <span  style="padding-left:10px">度</span>

                                    </el-form-item>
                                </el-col>
                                <el-col :span="15">
                                    <el-form-item label="方位角" prop="azimuthJijie" label-width="80px">
                                        <el-input-number controls-position="right"  style="width:110px;"  v-model="form.azimuthJijie" :disabled="isJianyi1" @change="changeAngle2('edit')" ></el-input-number>
                                        <span  style="padding-left:10px">度</span>
                                        <span style="padding-left:20px"><el-checkbox v-model="isJianyi1" @change="changeJianyi1">使用建议倾角/方位角</el-checkbox></span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="chart-div form-div" style="padding-left:0;margin-bottom:20px" v-if="form.bracketType==1 || form.bracketType==2 || form.bracketType==3">
                                <div class="illumination-div">
                                    <div class="illumination-left illumination-item">
                                        <div class="illumination-item-title">
                                            {{form.bracketType==1 ? form.dipAngleFixed :form.dipAngleJijie}}°倾角
                                        </div>
                                        <div class="canvas-div" id="canvas1">
                                            <div class="horizon-line"></div>
                                            <div class="moving-line" id="mydiv" style="transform-origin:left bottom;">
                                                <div class="center-dian dian"></div>
                                                <div class="hover-dian dian" :class="{'disabled':form.bracketType==1 ? isJianyi : isJianyi1}"></div>
                                            </div>
                                        </div>
                                        <div id="dipAngleFixed"  style="width:440px;height:300px"></div>
                                    </div>
                                    <div class="illumination-right illumination-item">
                                        <div class="illumination-item-title">{{form.bracketType==1 ? form.azimuthFixed : form.azimuthJijie}}°方位角</div>
                                        <div class="canvas-div" id="canvas2">
                                            <div class="horizon-line">
                                                <div class="dong">东</div>
                                                <div class="xi">西</div>
                                                <div class="nan">南</div>
                                            </div>
                                            <div class="moving-div" id="mydiv2" style="transform-origin:center bottom;">
                                                <div class="center-dian dian"></div>
                                                <div class="hover-dian2 dian" :class="{'disabled':form.bracketType==1 ? isJianyi : isJianyi1}"></div>
                                            </div>
                                        </div>
                                        <div id="azimuthFixed"  style="width:440px;height:300px"></div>
                                    </div>
                                </div>

                        </div>
<!--                        <el-form-item label="建议间距" prop="spacingFixed" v-if="form.bracketType==1">-->
<!--                            <el-input style="width:130px" v-model="form.spacingFixed"></el-input>-->
<!--                            <span style="padding-left:10px">米</span>-->
<!--                        </el-form-item>-->
                    </div>

                    <!--斜单轴追踪-->
                    <div v-if="form.bracketType==6">
                        <el-form-item label="轴倾角" prop="shaftAngle" label-width="80px">
                            <el-input-number controls-position="right"  style="width:130px;" v-model="form.shaftAngle"></el-input-number>
                        </el-form-item>
                    </div>

                </div>
                <div class="form-title" v-show="form.layoutType==1">支架排布</div>
                <div class="form-div" v-show="form.layoutType==1">
                    <div style="position: relative">
                        <el-form-item label-width="0" prop="bracketLayout.bracketSpacing">
                            <span style="display: inline-block;width:136px;color:#606266;position: relative;padding-left:10px">
                                <span style="color:#F56C6C;position: absolute;left:0px">*</span>
                                支架行间距(<span style="color:#ff00f0">e</span>)
                            </span>
                            <el-input-number controls-position="right" style="width:100px;" v-model="form.bracketLayout.bracketSpacing" :disabled="form.bracketLayout.isProposalSpacing"></el-input-number>
                            <span  style="padding-left:10px">cm</span>
                            <span style="padding-left:20px"><el-checkbox v-model="form.bracketLayout.isProposalSpacing" @change="getSpacingFixed">使用建议行间距</el-checkbox></span>
                        </el-form-item>
                        <el-form-item label="支架左右间距" label-width="140px" prop="bracketLayout.bracketLeftRightSpacing">
                            <el-input-number controls-position="right" style="width:100px" v-model="form.bracketLayout.bracketLeftRightSpacing"></el-input-number>
                        </el-form-item>
                        <el-form-item label-width="0px" label="" prop="bracketLayout.bottomSpacing">
                                <span style="display: inline-block;width:136px;color:#606266;position: relative;padding-left:10px">
                                    <span style="color:#F56C6C;position: absolute;left:0px">*</span>
                                    支架下边缘离地(<span style="color:#fcc600">i</span>)
                                </span>
                            <el-input-number controls-position="right" style="width:100px;" v-model="form.bracketLayout.bottomSpacing"></el-input-number><span style="padding-left:10px">cm</span>
                        </el-form-item>
                        <div style="position: absolute;right:0;top:0">
                            <img src="../static/img/1.png"/>
                        </div>
                    </div>
                    <el-form-item label-width="0">
                        <el-checkbox v-model="form.bracketLayout.isOverhaul" :disabled="form.bracketLayout.isAlgin" @change="changeIsOverhaul('bracketLayout')">设置检修通道</el-checkbox>
                    </el-form-item>
                    <div style="position: relative" v-if="form.bracketLayout.isOverhaul">
                        <el-form-item label="横向支架数量" prop="bracketLayout.overhaulTranNum" label-width="150px">
                            <el-select  placeholder="请选择" style="width:180px" v-model="form.bracketLayout.overhaulTranNum">
                                <el-option v-for="item in tenList" :key="item" :value="item" :label="item"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="纵向支架数量" prop="bracketLayout.overhaulPortraitNum" label-width="150px">
                            <el-select  placeholder="请选择" style="width:180px"  v-model="form.bracketLayout.overhaulPortraitNum">
                                <el-option v-for="item in tenList" :key="item" :value="item" :label="item"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label-width="0" prop="bracketLayout.overhaulTranWidth">
                            <span style="display: inline-block;width:146px;color:#606266;position: relative;padding-left:10px">
                                <span style="color:#F56C6C;position: absolute;left:0px">*</span>
                                横向检修通道宽度(<span style="color:#7ee697">f</span>)
                            </span>
                            <el-input-number controls-position="right" style="width:100px;" v-model="form.bracketLayout.overhaulTranWidth" :min="0" :max="100"></el-input-number>
                            <span  style="padding-left:10px">cm</span>
                        </el-form-item>
                        <el-form-item label-width="0" prop="bracketLayout.overhaulLongitudinalWidth">
                            <span style="display: inline-block;width:146px;color:#606266;position: relative;padding-left:10px">
                                <span style="color:#F56C6C;position: absolute;left:0px">*</span>
                                纵向检修通道宽度(<span style="color:#2e0bfb">g</span>)
                            </span>
                            <el-input-number controls-position="right" style="width:100px;" v-model="form.bracketLayout.overhaulLongitudinalWidth" :min="0" :max="100"></el-input-number>
                            <span  style="padding-left:10px">cm</span>
                        </el-form-item>
                    </div>
                    <el-form-item label-width="0">
                        <el-checkbox v-model="form.bracketLayout.isAlgin" :disabled="form.bracketLayout.isOverhaul" @change="changeAlgin('bracketLayout')">允许不对齐布置</el-checkbox>
                    </el-form-item>
                    <div style="position: relative;height:200px">
                        <el-form-item label-width="0" prop="bracketLayout.outMargin">
                            <span style="display: inline-block;width:146px;color:#606266;position: relative;padding-left:10px">
                                <span style="color:#F56C6C;position: absolute;left:0px">*</span>
                                布置边距(<span style="color:#ff6200">f</span>)
                            </span>
                            <el-input-number controls-position="right" style="width:100px;" v-model="form.bracketLayout.outMargin"></el-input-number>
                            <span  style="padding-left:10px">cm</span>
                        </el-form-item>
                        <div style="position: absolute;right:43px;" :style="{'top':form.bracketLayout.isOverhaul ? '-135px' : '60px'}">
                            <img src="../static/img/img4-1.png" v-if="form.bracketLayout.isOverhaul"/>
                            <img src="../static/img/img4.png" v-else/>
                        </div>
                    </div>
                </div>

                <div class="form-title" v-show="form.layoutType==2">组件排布</div>
                <div class="form-div" v-show="form.layoutType==2">
                    <div style="position: relative">
                        <el-form-item label="组件放置方式">
                            <el-radio-group v-model="form.componentLayout.componentLayoutType">
                                <el-radio :label="1">竖直放置</el-radio>
                                <el-radio :label="2">水平放置</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label-width="0" prop="componentLayout.componentMargin">
                            <span style="display: inline-block;width:136px;color:#606266;position: relative;padding-left:10px">
                                <span style="color:#F56C6C;position: absolute;left:0px">*</span>
                                组件左右间距(<span style="color:#ff00f0">a</span>)
                            </span>
                            <el-input-number controls-position="right" style="width:100px" v-model="form.componentLayout.componentMargin"></el-input-number>
                            <span  style="padding-left:10px">cm</span>
                        </el-form-item>
                        <el-form-item label-width="0px" label="" prop="componentLayout.isProposalSpacing">
                                <span style="display: inline-block;width:136px;color:#606266;position: relative;padding-left:10px">
                                    <span style="color:#F56C6C;position: absolute;left:0px">*</span>
                                    组件行间距(<span style="color:#ff00f0">c</span>)
                                </span>
                            <el-input-number controls-position="right" style="width:100px;" :disabled="form.componentLayout.isProposalSpacing" v-model="form.componentLayout.componentSpacing"></el-input-number><span style="padding-left:10px">cm</span>
                            <span style="padding-left:20px"><el-checkbox v-model="form.componentLayout.isProposalSpacing" @change="getSpacingFixed">使用建议行间距</el-checkbox></span>
                        </el-form-item>
                        <el-form-item label-width="0px" label="" prop="componentLayout.bottomSpacing">
                                <span style="display: inline-block;width:136px;color:#606266;position: relative;padding-left:10px">
                                    <span style="color:#F56C6C;position: absolute;left:0px">*</span>
                                    组件下边缘离地(<span style="color:#fcc600">i</span>)
                                </span>
                            <el-input-number controls-position="right" style="width:100px;" v-model="form.componentLayout.bottomSpacing"></el-input-number><span style="padding-left:10px">cm</span>
                        </el-form-item>
                        <el-form-item label-width="0px">
                            <el-checkbox v-model="form.componentLayout.isStack">堆栈放置</el-checkbox>
                        </el-form-item>
                        <div v-if="form.componentLayout.isStack">
                            <el-form-item label-width="140px" label="堆栈数量" prop="componentLayout.stackNum">
                                <el-select  placeholder="请选择" style="width:180px" v-model="form.componentLayout.stackNum">
                                    <el-option v-for="item in componentStackNumList" :key="item.value" :value="item.value" :label="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label-width="0px" label="" prop="componentLayout.stackMargin">
                                <span style="display: inline-block;width:136px;color:#606266;position: relative;padding-left:10px">
                                    <span style="color:#F56C6C;position: absolute;left:0px">*</span>
                                    堆栈间距(<span style="color:#27b148">b</span>)
                                </span>
                                <el-input-number controls-position="right" style="width:100px" v-model="form.componentLayout.stackMargin"></el-input-number><span style="padding-left:10px">cm</span>
                            </el-form-item>

                        </div>

                        <el-form-item label-width="0">
                            <el-checkbox v-model="form.componentLayout.isOverhaul" :disabled="form.componentLayout.isAlgin" @change="changeIsOverhaul('componentLayout')">设置检修通道</el-checkbox>
                        </el-form-item>
                        <div v-if="form.componentLayout.isOverhaul">
                            <el-form-item label="横向组件数量" prop="componentLayout.overhaulTranNum" label-width="150px">
                                <el-select  placeholder="请选择" style="width:180px" v-model="form.componentLayout.overhaulTranNum">
                                    <el-option v-for="item in tenList" :key="item" :value="item" :label="item"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="纵向组件数量" prop="componentLayout.overhaulPortraitNum" label-width="150px">
                                <el-select  placeholder="请选择" style="width:180px" v-model="form.componentLayout.overhaulPortraitNum">
                                    <el-option v-for="item in tenList" :key="item" :value="item" :label="item"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label-width="0" prop="componentLayout.overhaulTranWidth">
                                <span style="display: inline-block;width:146px;color:#606266;position: relative;padding-left:10px">
                                    <span style="color:#F56C6C;position: absolute;left:0px">*</span>
                                    横向检修通道宽度(<span style="color:#7ee697">d</span>)
                                </span>
                                <el-input-number controls-position="right" style="width:100px;" v-model="form.componentLayout.overhaulTranWidth" :min="0" :max="100"></el-input-number>
                                <span  style="padding-left:10px">cm</span>
                            </el-form-item>
                            <el-form-item label-width="0" prop="componentLayout.overhaulLongitudinalWidth">
                                <span style="display: inline-block;width:146px;color:#606266;position: relative;padding-left:10px">
                                    <span style="color:#F56C6C;position: absolute;left:0px">*</span>
                                    纵向检修通道宽度(<span style="color:#2e0bfb">e</span>)
                                </span>
                                <el-input-number controls-position="right" style="width:100px;" v-model="form.componentLayout.overhaulLongitudinalWidth" :min="0" :max="100"></el-input-number>
                                <span  style="padding-left:10px">cm</span>
                            </el-form-item>
                        </div>
                        <el-form-item label-width="0" prop="componentLayout.outMargin">
                            <span style="display: inline-block;width:146px;color:#606266;position: relative;padding-left:10px">
                                <span style="color:#F56C6C;position: absolute;left:0px">*</span>
                                布置边距(<span style="color:#ff6200">f</span>)
                            </span>
                            <el-input-number controls-position="right" style="width:100px;" v-model="form.componentLayout.outMargin"></el-input-number>
                            <span  style="padding-left:10px">cm</span>
                        </el-form-item>
                        <el-form-item label-width="0">
                            <el-checkbox v-model="form.componentLayout.isAlgin" :disabled="form.componentLayout.isOverhaul" @change="changeAlgin('componentLayout')">允许不对齐布置</el-checkbox>
                        </el-form-item>
                        <div style="position: absolute;right:-104px;top:0;width:550px;">
                            <div>
                                <img src="../static/img/layout1.png" v-if="form.componentLayout.componentLayoutType==1"/>
                                <img src="../static/img/layout1-1.png" v-if="form.componentLayout.componentLayoutType==2"/>
                            </div>
                            <div style="margin-top:40px;overflow: hidden"  >
                                <img src="../static/img/layout2.png" style="float:left" v-if="form.componentLayout.isStack"/>
                                <img src="../static/img/layout3.png" style="float:left"/>
                            </div>
                            <div style="margin-top:40px">
                                <img src="../static/img/img4-1.png" v-if="form.componentLayout.isOverhaul"/>
                                <img src="../static/img/img4.png" v-else/>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </el-form>
        <div class="setting-page-bottom">
            <div class="img"><img src="../static/img/logo.png"/> </div>
            <div class="right-link-div">
                <div class="link-btn">选择光伏组件</div>
                <div class="link-btn active">支架组件排布</div>
                <div class="link-btn">现场布置及分析</div>
                <div class="prev-btn"><el-button  icon="el-icon-back" @click="toPrev"></el-button></div>
                <div class="next-btn"><el-button type="primary" @click="toSettingInverter" :loading="btnLoading2">下一步</el-button></div>
            </div>
        </div>
        <el-dialog
                title="季节设置"
                :visible.sync="dialogVisible"
                width="600px">
            <div class="jijieDialogVisible">
                <div class="jijie-title">{{form.bracketType==2 ? '夏季':'冬季'}}的月份</div>
                <div class="jijie-con">
                    <el-checkbox-group v-model="xiajiList" @change="jijiechange" v-if="form.bracketType==2">
                        <el-checkbox :label="item.value" v-for="(item,index) in jijie" :key="index" style="width:60px;margin-bottom:5px">{{item.label}}</el-checkbox>
                    </el-checkbox-group>
                    <el-checkbox-group v-model="winterList" @change="jijiechange" v-if="form.bracketType==3">
                        <el-checkbox :label="item.value" v-for="item in jijie" style="width:60px;margin-bottom:5px" :key="item.value">{{item.label}}</el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        getSlopeVertical,
        getSlopeYear,
        getDetailBasic,
        getMeteorData,
        updateProject,
        getSlopeYearTu,
        getSaaYearTu,
        getComponentInfo,
        getSlopeSummer,
        getSlopeWinter,
        getSlopeChoose,
        getProjectDetail,
        getJianju,
        getDownList} from '@/api/index.js';
    const defaultBracketLayout = {
        bracketLayoutType:1,//组件在支架上放置方式 ,1竖直放置  2水平放置
        bracketUpMargin:20,//支架组件上边距
        bracketDownMargin:20,//支架组件下边距
        bracketLeftMargin:20,//支架组件左边距
        bracketRightMargin:20,//支架组件右边距
        componentTranNum:null,//组件横向布置数量
        componentMargin:20,//组件左右间距
        isStack:false,//是否堆栈
        stackNum:null,//堆栈数量
        stackMargin:20,//堆栈间距
        isSupplement:false,//是否启用补充支架
        supplementTranNum:null,//补充支架组件横向布置数量
        isProposalSpacing:false,//使用建议行间距
        bracketSpacing:50,//支架行间距
        bracketLeftRightSpacing:50,//支架左右间距
        isOverhaul:false,//是否设置检修通道
        overhaulTranNum:2,//检修通道横向支架数量
        overhaulPortraitNum:2,//检修通道纵向支架数量
        overhaulTranWidth:100,//横向检修通道宽度
        overhaulLongitudinalWidth:100,//纵向检修通道宽度
        outMargin:150,//布置边距
        isAlgin:false,
        bottomSpacing:'',//组件下边离地高度
    };
    const defaultComponentLayout = {
        componentLayoutType:1,//组件放置方式 ,1竖直放置  2水平放置
        componentMargin:20,//组件左右间距
        isStack:false,//是否堆栈
        stackNum:null,//堆栈数量
        stackMargin:20,//堆栈间距
        isProposalSpacing:false,//使用建议行间距
        componentSpacing:null,//组件行间距
        isOverhaul:false,//是否设置检修通道
        overhaulTranNum:2,//检修通道横向支架数量
        overhaulPortraitNum:2,//检修通道纵向支架数量
        overhaulTranWidth:100,//横向检修通道宽度
        overhaulLongitudinalWidth:100,//纵向检修通道宽度
        outMargin:150,//布置边距
        isAlgin:false,
        bottomSpacing:'',//组件下边离地高度
    };
    export default {
        name: 'settingPhotovoltaic',
        data() {
            const validateSupplementTranNum = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请选择补充支架组件横向布置数量'))
                }else if(value >= this.form.bracketLayout.componentTranNum){
                    callback(new Error('补充支架组件横向布置数量应小于标注支架布置数量'))
                }else{
                    callback()
                }
            };
            return {
                form:{
                    layoutType:1,//布置方式，1组件置于支架上  2直接布置组件（一般用于屋顶）
                    bracketLayout:JSON.parse(JSON.stringify(defaultBracketLayout)),
                    componentLayout:JSON.parse(JSON.stringify(defaultComponentLayout)),
                    bracketType:null,//支架类型
                    dipAngleFixed:null,//固定倾角
                    azimuthFixed:0,//固定方位角
                    spacingFixed:null,//固定建议间距
                    dipAngleJijie:null,//季节倾角
                    azimuthJijie:0,//季节方位角
                    summerType:1,//夏季类型
                    winterType:1,//冬季类型
                    shaftAngle:null,//轴倾角
                },
                rules:{
                    bracketType:[{required: true, message: '请选择支架类型', trigger: 'change'}],
                    dipAngleFixed:[{required: true, message: '请输入倾角', trigger: 'blur'}],
                    azimuthFixed:[{required: true, message: '请输入方位角', trigger: 'blur'}],
                    spacingFixed:[{required: true, message: '请输入建议间距', trigger: 'blur'}],
                    dipAngleJijie:[{required: true, message: '请输入倾角', trigger: 'blur'}],
                    azimuthJijie:[{required: true, message: '请输入方位角', trigger: 'blur'}],
                    shaftAngle:[{required: true, message: '请输入轴倾角', trigger: 'blur'}],
                    'bracketLayout.bracketUpMargin':[{required: true, message: '请输入支架组件上边距', trigger: 'blur'}],
                    'bracketLayout.bracketDownMargin':[{required: true, message: '请输入支架组件下边距', trigger: 'blur'}],
                    'bracketLayout.bracketLeftMargin':[{required: true, message: '请输入支架组件左边距', trigger: 'blur'}],
                    'bracketLayout.bracketRightMargin':[{required: true, message: '请输入支架组件右边距', trigger: 'blur'}],
                    'bracketLayout.bracketLeftRightSpacing':[{required: true, message: '请输入支架左右间距', trigger: 'blur'}],
                    'bracketLayout.componentTranNum':[{required: true, message: '请选择组件横向布置数量', trigger: 'change'}],
                    'bracketLayout.componentMargin':[{required: true, message: '请输入支架组件左右间距', trigger: 'blur'}],
                    'bracketLayout.bottomSpacing':[{required: true, message: '请输入支架下边缘离地高度', trigger: 'blur'}],
                    'bracketLayout.stackNum':[{required: true, message: '请选择堆栈数量', trigger: 'change'}],
                    'bracketLayout.stackMargin':[{required: true, message: '请输入堆栈间距', trigger: 'blur'}],
                    'bracketLayout.supplementTranNum':[{required: true,validator:validateSupplementTranNum, trigger: 'change'}],
                    'bracketLayout.bracketSpacing':[{required: true, message: '请输入支架行间距', trigger: 'blur'}],
                    'bracketLayout.overhaulTranNum':[{required: true, message: '请选择横向组件数量', trigger: 'change'}],
                    'bracketLayout.overhaulPortraitNum':[{required: true, message: '请选择纵向组件数量', trigger: 'change'}],
                    'bracketLayout.overhaulTranWidth':[{required: true, message: '请输入横向检修通道宽度', trigger: 'blur'}],
                    'bracketLayout.overhaulLongitudinalWidth':[{required: true, message: '请输入纵向检修通道宽度', trigger: 'blur'}],
                    'bracketLayout.outMargin':[{required: true, message: '请输入布置边距', trigger: 'blur'}],
                },
                rules1:{
                    bracketType:[{required: true, message: '请选择支架类型', trigger: 'change'}],
                    dipAngleFixed:[{required: true, message: '请输入倾角', trigger: 'blur'}],
                    azimuthFixed:[{required: true, message: '请输入方位角', trigger: 'blur'}],
                    spacingFixed:[{required: true, message: '请输入建议间距', trigger: 'blur'}],
                    dipAngleJijie:[{required: true, message: '请输入倾角', trigger: 'blur'}],
                    azimuthJijie:[{required: true, message: '请输入方位角', trigger: 'blur'}],
                    shaftAngle:[{required: true, message: '请输入轴倾角', trigger: 'blur'}],
                    'componentLayout.componentMargin':[{required: true, message: '请输入组件左右间距', trigger: 'blur'}],
                    'componentLayout.stackNum':[{required: true, message: '请选择堆栈数量', trigger: 'change'}],
                    'componentLayout.stackMargin':[{required: true, message: '请输入堆栈间距', trigger: 'blur'}],
                    'componentLayout.componentSpacing':[{required: true, message: '请输入组件行间距', trigger: 'blur'}],
                    'componentLayout.bottomSpacing':[{required: true, message: '请输入组件下边缘离地高度', trigger: 'blur'}],
                    'componentLayout.overhaulTranNum':[{required: true, message: '请选择横向组件数量', trigger: 'change'}],
                    'componentLayout.overhaulPortraitNum':[{required: true, message: '请选择纵向组件数量', trigger: 'change'}],
                    'componentLayout.overhaulTranWidth':[{required: true, message: '请输入横向检修通道宽度', trigger: 'blur'}],
                    'componentLayout.overhaulLongitudinalWidth':[{required: true, message: '请输入纵向检修通道宽度', trigger: 'blur'}],
                    'componentLayout.outMargin':[{required: true, message: '请输入布置边距', trigger: 'blur'}],
                },
                type:'',
                dialogVisible:false,
                activeName:'first',
                summer:'4,5,6,7,8,9',
                winter:'10,11,12,1,2,3',
                xiajiList:['4','5','6','7','8','9'],
                winterList:['10','11','12','1','2','3'],
                jijie:[
                    {label:'1月',value:'1'},
                    {label:'2月',value:'2'},
                    {label:'3月',value:'3'},
                    {label:'4月',value:'4'},
                    {label:'5月',value:'5'},
                    {label:'6月',value:'6'},
                    {label:'7月',value:'7'},
                    {label:'8月',value:'8'},
                    {label:'9月',value:'9'},
                    {label:'10月',value:'10'},
                    {label:'11月',value:'11'},
                    {label:'12月',value:'12'},
                ],
                isJianyi:true,//是否使用建议
                isJianyi1:true,//是否使用建议
                dipAngleJianyi:null,//建议倾角
                id:this.$route.query.id,//项目ID
                BasicValue:{},//项目基本信息
                Hmth:[],//月幅照量
                btnLoading2:false,
                curComponentInfo:{},//当前组件详情
                tenList:[1,2,3,4,5,6,7,8,9,10],
                componentTranNumList:[],//组件横向布置数量列表
                componentStackNumList:[],//堆栈数量列表
            }
        },
        computed: {
            bWidth() {
                return (this.form.bracketLayout.bracketLeftMargin+this.form.bracketLayout.bracketRightMargin+(this.curComponentInfo.w_c*this.form.bracketLayout.componentTranNum)+(this.form.bracketLayout.componentTranNum-1)* this.form.bracketLayout.componentMargin).toFixed(2)
            },
            bLength(){
                return (this.form.bracketLayout.bracketUpMargin+this.form.bracketLayout.bracketDownMargin+(this.curComponentInfo.l_c*this.form.bracketLayout.stackNum)+(this.form.bracketLayout.stackNum-1)*this.form.bracketLayout.stackMargin).toFixed(2)
            },

            bWidth2() {
                return (this.form.bracketLayout.bracketLeftMargin+this.form.bracketLayout.bracketRightMargin+(this.curComponentInfo.l_c*this.form.bracketLayout.componentTranNum)+(this.form.bracketLayout.componentTranNum-1)* this.form.bracketLayout.componentMargin).toFixed(2)
            },
            bLength2(){
                return (this.form.bracketLayout.bracketUpMargin+this.form.bracketLayout.bracketDownMargin+(this.curComponentInfo.w_c*this.form.bracketLayout.stackNum)+(this.form.bracketLayout.stackNum-1)*this.form.bracketLayout.stackMargin).toFixed(2)
            },
            isone(){
                return this.form.layoutType==1
            },
        },
        watch:{
            '$route'(to,from){
                if(from.name=='settingPhotovoltaic'){
                    this.init()
                }
            }
        },
        methods: {
            //是否开启检修通道
            changeIsOverhaul(type){
                if(this.form[type].isOverhaul){
                    this.form[type].isAlgin = !this.form[type].isOverhaul
                }

            },
            //是否开启对齐布置
            changeAlgin(type){
                console.log("this.form[type].isAlgin",this.form[type].isAlgin)
                if(this.form[type].isAlgin){
                    this.form[type].isOverhaul = !this.form[type].isAlgin
                }

            },
            changeType(){
                console.log("asd",this.form)
            },


            //上一步
            toPrev(){
                this.$router.go(-1)
            },

            //下一步
            toSettingInverter(){
                this.$refs['settingForm'].validate((valid) => {
                    if (valid) {
                        this.btnLoading2 = true;
                        this.saveProject().then(()=>{
                            this.btnLoading2 = false;
                            this.$router.push({name:'settingAnalysis',query: {id: this.id},});
                        }).catch(()=>{
                            this.btnLoading2 = false;
                        });
                    }
                })
            },
            //保存工程
            saveProject(){
                let data = {};
                data.id = this.id;
                data.bracketType = this.form.bracketType;
                data.bracket = {};
                data.layoutType  = parseInt(this.form.layoutType);
                data.bracketLayout = {};
                data.componentLayout = {};
                if(this.form.layoutType == 1){
                    data.bracketLayout = JSON.parse(JSON.stringify(this.form.bracketLayout));
                    data.componentLayout = JSON.parse(JSON.stringify(defaultComponentLayout));
                }else if(this.form.layoutType == 2){
                    data.bracketLayout = JSON.parse(JSON.stringify(defaultBracketLayout));
                    data.componentLayout = JSON.parse(JSON.stringify(this.form.componentLayout));
                }
                if(this.form.bracketType == 1){
                    data.bracket = {
                        dipAngleFixed :this.form.dipAngleFixed,
                        azimuthFixed :this.form.azimuthFixed,
                        spacingFixed :this.form.spacingFixed,
                        isJianyi:this.isJianyi,
                    }
                }else if(this.form.bracketType == 2 || this.form.bracketType == 3){
                    data.bracket = {
                        dipAngleJijie: this.form.dipAngleJijie,
                        azimuthJijie :this.form.azimuthJijie,
                        isJianyi1:this.isJianyi1
                    };
                    if (this.form.bracketType == 2){
                        data.bracket.summerType = this.form.summerType;
                        data.bracket.xiajiList = this.xiajiList;
                        data.bracket.summer =  this.summer;
                        data.bracket.winterType = 1;
                        data.bracket.winterList = ['10','11','12','1','2','3'];
                        data.bracket.winter = '10,11,12,1,2,3'
                    }else{
                        data.bracket.winterType = this.form.winterType;
                        data.bracket.winterList = this.winterList;
                        data.bracket.winter = this.winter;
                        data.bracket.summerType = 1;
                        data.bracket.xiajiList = ['4','5','6','7','8','9'];
                        data.bracket.summer =  '4,5,6,7,8,9';
                    }
                }else if(this.form.bracketType == 6){
                    data.bracket = {
                        shaftAngle:this.form.shaftAngle
                    }
                }
                return updateProject(data).then((res)=>{
                    this.$message({
                        message: '工程文件保存成功',
                        type: 'success'
                    });
                })
            },
            //提交季节设置
            submit(){
                if (this.form.bracketType == 2 && this.xiajiList.length == 0){
                    this.$message({
                        message: '请选择夏季月份',
                        type: 'warning'
                    });
                }else if (this.form.bracketType == 3 && this.winterList.length == 0){
                    this.$message({
                        message: '请选择冬季月份',
                        type: 'warning'
                    });
                }
                this.changeJianyi1();
                this.dialogVisible = false;
            },
            //显示季节设置弹窗
            showJiJie(){
                this.dialogVisible = true;
            },
            //自定义月份选择改变
            jijiechange(val){
                let choose = val.join(",");
                let notChoose = [];
                this.jijie.forEach((el)=>{
                    let i = val.findIndex((ee)=>{
                        return  ee == el.value
                    });
                    if (i ==-1){
                        notChoose.push(el.value)
                    }
                });
                notChoose = notChoose.join(",")
                if (this.form.bracketType == 2){
                    this.summer = choose;
                    this.winter = notChoose;
                } else if (this.form.bracketType == 3){
                    this.winter = choose;
                    this.summer = notChoose;
                }
            },
            //季节类型判断
            jijianFn(){
                if (this.isJianyi1){
                    if (this.form.bracketType == 2 && this.form.summerType == 1){ //夏季最优
                        return this.countSummerDipAngle();
                    }else if (this.form.bracketType == 2 && this.form.summerType == 2){ //夏季自定义
                        return  this.countChooseDipAngle();
                    } else if (this.form.bracketType == 3 && this.form.winterType == 1){ //冬季最优
                        return this.countWinterDipAngle();
                    } else if (this.form.bracketType == 3 && this.form.winterType == 2){ //冬季自定义
                        return this.countChooseDipAngle();
                    }
                }else{
                    return Promise.resolve(1)
                }
            },
            //季节支架是否使用建议角度
            changeJianyi1(){
                this.form.azimuthJijie = 0;
                this.jijianFn().then(()=>{
                    if(this.isJianyi1){
                        $(".hover-dian").off();
                        $(".hover-dian2").off();
                        this.changeAngle('edit');
                        this.changeAngle2('edit')
                    }else{
                        this.getscole($(".hover-dian"));
                        this.getscole2($(".hover-dian2"));
                    }
                });
            },
            //改变支架类型显示不同表单
            changeTYpe(){
                if(this.form.bracketType == 1){ // 固定支架临听鼠标事件
                    setTimeout(()=>{
                        this.changeJianyi();
                        this.changeAngle('edit');
                        this.changeAngle2('edit')
                    },100);
                }else if (this.form.bracketType == 2 || this.form.bracketType == 3){
                    this.jijianFn().then(()=>{
                        setTimeout(()=>{
                            this.changeJianyi1();
                            this.changeAngle('edit');
                            this.changeAngle2('edit')
                        },100);
                    })
                }else if(this.form.bracketType == 6){
                    this.getVerticalSlopeData()
                }
            },
            //计算夏季最优倾角
            countSummerDipAngle(){
                let azimuthJijie = this.form.azimuthJijie ? this.form.azimuthJijie : 0;
                let data = this.setData('saa',0);
                return getSlopeSummer(data).then((res)=>{
                    this.form.dipAngleJijie = res.slope_summer;
                })
            },
            //计算冬季最优倾角
            countWinterDipAngle(){
                let data = this.setData('saa',0);
                return getSlopeWinter(data).then((res)=>{
                    this.form.dipAngleJijie = res.slope_winter;
                })
            },
            //计算自定义最优倾角
            countChooseDipAngle(){
                let data = this.setData('saa',0);
                let chooseList = [];
                if (this.form.bracketType == 2){
                    chooseList = this.xiajiList;
                } else if (this.form.bracketType == 3){
                    chooseList = this.winterList;
                }
                for(let i=1; i<13; i++){
                    let key =  'm' + i;
                    let index = chooseList.findIndex((el)=>{
                        return parseInt(el) == i;
                    });
                    data[key] = index != -1 ? 1 : 0;
                }
                return  getSlopeChoose(data).then((res)=>{
                    this.form.dipAngleJijie = res.slope_choose;
                })
            },
            //计算斜单轴最佳倾角
            getVerticalSlopeData(){
                let data = this.setData('vertical',0);
                return getSlopeVertical(data).then((res)=>{
                    this.form.shaftAngle = res.Vertical_slope;
                })
            },
            //固定支架是否使用建议角度
            changeJianyi(){
                if(this.isJianyi){
                    $(".hover-dian").off();
                    $(".hover-dian2").off();
                    this.form.dipAngleFixed = this.dipAngleJianyi;
                    this.form.azimuthFixed = 0;
                    $("#mydiv").css("transform", "rotate(" + (-this.form.dipAngleFixed) + "deg)");
                    $("#mydiv2").css("transform", "rotate(" + this.form.azimuthFixed + "deg)");
                    this.changeAngle('edit');
                    this.changeAngle2('edit')
                }else{
                    this.getscole($(".hover-dian"));
                    this.getscole2($(".hover-dian2"));
                }
            },
            //鼠标跟随计算倾角
            getscole(objmodel) {
                if((!this.isJianyi && this.form.bracketType == 1) || (!this.isJianyi1 && (this.form.bracketType==2 || this.form.bracketType == 3))){
                    let offsetX;
                    let offsetY;
                    let isMouseDown = false;
                    let angle;
                    let self = this;
                    objmodel.mousedown(function (e) { //鼠标按下
                        offsetX = parseInt($('#mydiv').offset().left);
                        offsetY = parseInt($('#mydiv').offset().top);
                        isMouseDown = true;
                    });
                    $("#canvas1").mousemove(function (ev) {
                        if (isMouseDown){
                            let ox = parseInt(ev.pageX) - parseInt(offsetX);//计算出鼠标相对于画布中心的位置
                            let oy = parseInt(ev.pageY) - parseInt(offsetY);
                            angle = Math.atan2(oy,ox)/Math.PI * 180;
                            angle = parseInt(angle);
                            if (angle >= 0){
                                angle = 0;
                            } else if (angle < -90 ){
                                angle = -90;
                            }
                            $("#mydiv").css("transform", "rotate(" + angle + "deg)");
                            if (angle < 0){
                                if (self.form.bracketType == 1){
                                    self.form.dipAngleFixed = -angle;
                                } else if (self.form.bracketType == 2 || self.form.bracketType == 3) {
                                    self.form.dipAngleJijie = -angle;
                                }
                            }else{
                                if (self.form.bracketType == 1){
                                    self.form.dipAngleFixed = angle;
                                } else if (self.form.bracketType == 2 || self.form.bracketType == 3) {
                                    self.form.dipAngleJijie = angle;
                                }

                            }
                        }
                    }).mouseup(function () {
                        isMouseDown = false;
                        self.getSaaYearTuData();
                        self.getSpacingFixed();
                    });
                }
            },
            //鼠标跟随计算方位角
            getscole2(objmodel) {
                if(!this.isJianyi){
                    let offsetX;
                    let offsetY;
                    let isMouseDown = false;
                    let angle;
                    let self = this;
                    objmodel.mousedown(function (e) { //鼠标按下
                        offsetX = parseInt($('#mydiv2').offset().left)+40;
                        offsetY = parseInt($('#mydiv2').offset().top) + 30;
                        isMouseDown = true;
                    });
                    $("#canvas2").mousemove(function (ev) {
                        if (isMouseDown){
                            let ox = parseInt(ev.pageX) - parseInt(offsetX);//计算出鼠标相对于画布中心的位置
                            let oy = parseInt(ev.pageY) - parseInt(offsetY);
                            let to = Math.abs(ox / oy);
                            let angle = Math.atan(to) / (2 * Math.PI) * 360; //鼠标相对于旋转中心的角度
                            angle = parseInt(angle);
                            if (ox < 0 && oy < 0)
                            {
                                angle = -angle;
                            } else if (ox < 0 && oy > 0)
                            {
                                angle = -(180 - angle)
                            } else if (ox > 0 && oy < 0)
                            {
                                angle = angle;
                            } else if (ox > 0 && oy > 0)
                            {
                                angle = (180 - angle);
                            }
                            if (angle >= 90){
                                angle = 90
                            } else if (angle < -90 ){
                                angle = -90;
                            }
                            $("#mydiv2").css("transform", "rotate(" + angle + "deg)");
                            if (self.form.bracketType == 1){
                                self.form.azimuthFixed = angle;
                            } else if (self.form.bracketType == 2 || self.form.bracketType == 3) {
                                self.form.azimuthJijie = angle;
                            }

                        }
                    }).mouseup(function () {
                        isMouseDown = false;
                        self.getSlopeYearTuData();
                        self.getSpacingFixed();
                    });
                }

            },
            //输入改变倾角
            changeAngle(type){
                let angle;
                if (this.form.bracketType == 1){
                    angle = this.form.dipAngleFixed>0 ?  -this.form.dipAngleFixed : this.form.dipAngleFixed;
                } else if (this.form.bracketType == 2 || this.form.bracketType == 3){
                    angle = this.form.dipAngleJijie > 0 ? -this.form.dipAngleJijie : this.form.dipAngleJijie;
                }
                $("#mydiv").css("transform", "rotate(" + angle + "deg)");
               this.getSaaYearTuData();
                if(type != 'new'){
                   // this.getSpacingFixed();
                }
            },
            //输入改变方位角
            changeAngle2(type){
                let angle;
                if (this.form.bracketType == 1){
                    angle = this.form.azimuthFixed;
                } else if (this.form.bracketType == 2 || this.form.bracketType == 3){
                    angle = this.form.azimuthJijie;
                }
                $("#mydiv2").css("transform", "rotate(" + angle + "deg)");
                this.getSlopeYearTuData();
                if(type != 'new'){
                    this.getSpacingFixed();
                }
            },
            //获取倾角对辐照度影响分析图（全年）
            getSlopeYearTuData(){
                let data;
                if (this.form.bracketType == 1){
                    data = this.setData('saa',this.form.azimuthFixed ? this.form.azimuthFixed : 0);
                } else if (this.form.bracketType == 2 || this.form.bracketType == 3){
                    data = this.setData('saa',this.form.azimuthJijie ? this.form.azimuthJijie : 0);
                }

                getSlopeYearTu(data).then((res)=>{
                    this.drawLineDipAngle(res.year_x,res.year_y);
                })
            },
            //画倾角对幅照度的影响分析
            drawLineDipAngle(x,y)  {
                let myChart = this.$echarts.init(document.getElementById('dipAngleFixed'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '倾角对幅照度的影响分析',
                        x:'center' ,
                        textStyle: {
                            fontSize: 14,
                            fontStyle: 'normal',
                            fontWeight: 'normal',
                        },
                    },
                    tooltip : {
                        trigger: 'axis',
                        formatter(params){
                            console.log("params",params);
                            return "倾角："+params[0].name + '°' + '<br/>' + '与最佳辐照度的比值：' + params[0].data.toFixed(2)
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: x,
                        name:'倾角°',
                        nameLocation:'middle',
                        nameGap:40
                    },
                    yAxis: {
                        type: 'value',
                        name:'与最佳幅照度的比值',
                        nameLocation:'middle',
                        nameGap:30
                    },
                    series: [{
                        data: y,
                        type: 'line',
                        smooth: true
                    }]
                });
            },
            //获取方位角对辐照度影响分析图（全年）
            getSaaYearTuData(){
                let data;
                if (this.form.bracketType == 1){
                    data = this.setData('slope',this.form.dipAngleFixed ? this.form.dipAngleFixed : 0);
                } else if (this.form.bracketType == 2 || this.form.bracketType == 3){
                    data = this.setData('slope',this.form.dipAngleJijie ? this.form.dipAngleJijie : 0);

                }
                getSaaYearTu(data).then((res)=>{
                    this.drawLineAzimuth(res.year_x,res.year_y);
                })
            },
            //画方位角对幅照度的影响分析
            drawLineAzimuth(x,y){
                let myChart = this.$echarts.init(document.getElementById('azimuthFixed'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '倾角对幅照度的影响分析',
                        x:'center' ,
                        textStyle: {
                            fontSize: 14,
                            fontStyle: 'normal',
                            fontWeight: 'normal',
                        },
                    },
                    tooltip : {
                        trigger: 'axis',
                        formatter(params){
                            return "方位角："+params[0].name + '°' + '<br/>' + '与最佳辐照度的比值：' + params[0].data.toFixed(2)
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: x,
                        name:'方位角°',
                        nameLocation:'middle',
                        nameGap:40
                    },
                    yAxis: {
                        type: 'value',
                        name:'与最佳幅照度的比值',
                        nameLocation:'middle',
                        nameGap:30
                    },
                    series: [{
                        data: y,
                        type: 'line',
                        smooth: true
                    }]
                });
            },
            //设置获取角度参数
            setData(type,val){
                let data = {};
                this.Hmth.forEach((el,index)=>{
                    let key = 'Hmth' + (index + 1);
                    data[key] = (el*24/1000).toFixed(2);
                });
                for(let i=1; i<13; i++){
                    let key1 =  'roug' + i;
                    if(this.BasicValue.reflectivityType == 'fixed'){
                        data[key1] = this.BasicValue.reflectivity[0]['value']
                    }else{
                        data[key1] = this.BasicValue.reflectivity[i-1]['value']
                    }
                }
                if (type == 'saa'){
                    data.saa=val;
                } else if(type == 'slope'){
                    data.slope=val;
                }
                data.lat=this.BasicValue.latitude;
                return data
            },
            //获取固定支架，建议的倾角
            getSlopeYearData(){
                let data = this.setData('saa',0);
                getSlopeYear(data).then((res)=>{
                    this.dipAngleJianyi = res.slope_year;
                })
            },

            //获取建议的间距
            getSpacingFixed(){
                let data = {};
                data.lat = this.BasicValue.latitude;
                if(this.form.bracketType == 1){
                    data.slope = this.form.dipAngleFixed ? this.form.dipAngleFixed : 0;
                    data.saa = this.form.azimuthFixed ? this.form.azimuthFixed : 0;
                }else if(this.form.bracketType == 2 || this.form.bracketType == 3){
                    data.slope = this.form.dipAngleJijie ? this.form.dipAngleJijie : 0;
                    data.saa = this.form.azimuthJijie ? this.form.azimuthJijie : 0;
                }else if(this.form.bracketType == 6){
                    data.slope = this.form.shaftAngle ? this.form.shaftAngle : 0;
                    data.saa = 0;
                }else{
                    data.slope = 0;
                    data.saa = 0;
                }
                if(this.form.layoutType==1 && this.form.bracketLayout.isProposalSpacing){//支架
                    data.W = this.form.bracketLayout.bracketLeftMargin;
                    getJianju(data).then((res)=>{
                        this.form.bracketLayout.bracketSpacing = res.jianju ? (res.jianju).toFixed(2) : '';
                    })
                }else if(this.form.layoutType==2 && this.form.componentLayout.isProposalSpacing){ //组件
                    data.W = this.curComponentInfo.l_c;
                    getJianju(data).then((res)=>{
                        this.form.componentLayout.componentSpacing = res.jianju ? (res.jianju).toFixed(2) : '';
                    })
                }
            },

            //获取项目基本信息，拿到经纬度及幅照信息
            getDetailBasicData(){
                getDetailBasic({projectId:this.$route.query.id}).then((res)=>{
                    this.BasicValue = res;
                    this.getMeteorFN().then(()=>{
                        this.getProjectComponentData();
                    });
                })
            },
            //获取气象数据
            getMeteorFN(){
                let data={};
                data.source = this.BasicValue.meteorSource;
                data.latitude = this.BasicValue.latitude;
                data.longitude = this.BasicValue.longitude;
                return getMeteorData(data).then((res)=>{
                    this.Hmth = res.gh;
                    this.getSlopeYearData();
                })
            },
            //获取组件详情
            getComponentInfoData(){
                return getComponentInfo({componentId:this.form.componentId}).then((res)=>{
                    this.curComponentInfo = res;
                })
            },

            //获取工程文件件信息
            getProjectComponentData(){
                getProjectDetail({projectId:this.$route.query.id}).then((res)=>{
                    this.form = Object.assign({
                        dipAngleFixed:null,
                        azimuthFixed:null,
                        spacingFixed:null,
                        dipAngleJijie:null,
                        azimuthJijie:0,
                        summerType:1,
                        winterType:1,
                        shaftAngle:null}, res);
                    if(!this.form.layoutType){ //第一次设置，初始化数据
                        this.form.layoutType = 1;
                        this.form.bracketLayout = JSON.parse(JSON.stringify(defaultBracketLayout));
                        this.form.componentLayout = JSON.parse(JSON.stringify(defaultComponentLayout));
                    }else{
                        this.form.layoutType = parseInt(this.form.layoutType);
                    }
                    if(this.form.componentId){
                       this.getComponentInfoData();
                    }
                    if(this.form.bracketType == 1){
                        this.form.dipAngleFixed = this.form.bracket ? this.form.bracket.dipAngleFixed : null;
                        this.form.azimuthFixed = this.form.bracket ? this.form.bracket.azimuthFixed : null;
                        this.form.spacingFixed = this.form.bracket ? this.form.bracket.spacingFixed : null;
                        this.isJianyi = this.form.bracket ? this.form.bracket.isJianyi:true;
                        setTimeout(()=>{
                            this.getscole($(".hover-dian"));
                            this.getscole2($(".hover-dian2"));
                            this.changeAngle('new');
                            this.changeAngle2('new');
                        },600);
                    }else if(this.form.bracketType == 2 || this.form.bracketType == 3){
                        this.form.dipAngleJijie = this.form.bracket ? this.form.bracket.dipAngleJijie : null;
                        this.form.azimuthJijie = this.form.bracket ? this.form.bracket.azimuthJijie : 0;
                        this.isJianyi1 = this.form.bracket ? this.form.bracket.isJianyi1:true;
                        this.form.summerType = this.form.bracket.summerType ? this.form.bracket.summerType :1;
                        this.form.winterType = this.form.bracket.winterType ? this.form.bracket.winterType :1;
                        this.summer = this.form.bracket.summer ? this.form.bracket.summer : '4,5,6,7,8,9';
                        this.winter = this.form.bracket.winter ? this.form.bracket.winter : '10,11,12,1,2,3';
                        this.xiajiList = this.form.bracket.xiajiList ? this.form.bracket.xiajiList : ['4','5','6','7','8','9'];
                        this.winterList = this.form.bracket.winterList ? this.form.bracket.winterList :['10','11','12','1','2','3'];
                        setTimeout(()=>{
                            this.getscole($(".hover-dian"));
                            this.getscole2($(".hover-dian2"));
                            this.changeAngle('new');
                            this.changeAngle2('new');
                        },600);
                    }else if(this.form.bracketType == 6){
                        this.form.shaftAngle = this.form.bracket ? this.form.bracket.shaftAngle : null;
                        if(!this.form.shaftAngle){
                            this.getVerticalSlopeData()
                        }
                    }
                    setTimeout(()=>{
                        this.$refs['settingForm'].clearValidate()
                    },500)
                })
            },
            //获取组件横向数量下拉列表
            getDownListDade(){
                getDownList({dictType:'componentTransverseNum'}).then((res)=>{
                    this.componentTranNumList = res;
                })
            },
            //获取堆栈数量下拉列表
            getComponentStackNumList(){
                getDownList({dictType:'componentStackNum'}).then((res)=>{
                    this.componentStackNumList = res;
                })
            },
            //初始化页面数据
            init(){
                this.getDownListDade();
                this.getComponentStackNumList();
                this.getDetailBasicData();
            }
        },
        created() {
            this.init()
        }
    }
</script>

<style>
    #allmap {
        height: 300px;
        width: 100%;
        overflow: hidden;
    }

    #r-result {
        width: 100%;
        font-size: 14px;
        margin-bottom:20px
    }
</style>



